<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>任务分配</span>
            </div>
        </template>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="appointmentId" label="预约ID" />
            <el-table-column prop="user.realName" label="客户姓名" />
            <el-table-column prop="department.departmentName" label="预约分类" />
            <el-table-column prop="problem" label="问题描述" />
            <el-table-column prop="type.typeName" label="服务类型" />
            <el-table-column prop="appointmentStatus" label="预约状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.appointmentStatus === 0" type="primary">已预约</el-tag>
                    <el-tag v-if="scope.row.appointmentStatus === 2" type="success">服务中</el-tag>
                    <el-tag v-if="scope.row.appointmentStatus === 1" type="danger">已取消</el-tag>
                    <el-tag v-if="scope.row.appointmentStatus === 3" type="danger">已完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="服务员工">
                <template #default="scope">
                    <span v-if="scope.row.appointmentStatus != 1">
                        <el-button v-if="scope.row.emp === null" size="small"
                            @click="showAddEmp(scope.row.appointmentId)">分配员工</el-button>
                        <span v-else>{{ scope.row.emp.realName }}</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="服务进度">
                <template #default="scope">
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.speed * 10" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="showPart(scope.row.appointmentId)">维修</el-button>
                    <el-popconfirm title="你确定完成该业务吗？" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="finshOrder(scope.row.appointmentId)">
                        <template #reference>
                            <el-button size="small" type="danger">完成任务</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-row class="row-bg" justify="space-evenly">
                <el-col :span="6">
                    <el-pagination layout="prev, pager, next" :total="pageInfo.total" :page-size="pageInfo.pageSize"
                        @current-change="getAll" />
                </el-col>
            </el-row>
        </template>
    </el-card>


    <!-- START 维修使用组件 -->
    <el-dialog v-model="partVisible" title="添加配件" width="500" center>
        <el-select v-model="partIdList" multiple placeholder="请选择" value-key="partId">
            <el-option v-for="(item, index) in partList" :key="index" :label="item.part.partName" :value="item" />
        </el-select>
        <el-divider />
        <span v-for="item in partIdList">
            <el-form :model="item" status-icon label-width="auto" class="demo-form-inline" inline="true">
                <el-form-item label="配件名">
                    <el-input v-model="item.part.partName" type="text" autocomplete="off" disabled />
                </el-form-item>
                <el-form-item label="数量" :rules="[
                    { required: true, message: '必要字段' },
                ]">
                    <el-input v-model="item.quantity" min="1" :max="item.part.quantity" type="number"
                        autocomplete="off" />
                </el-form-item>
            </el-form>
        </span>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="partVisible = false">取消</el-button>
                <el-button type="primary" @click="updatePart">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <!-- END 维修使用组件 -->
</template>

<script setup>
import orderApi from "@/api/orderApi";
import partAPi from "@/api/partApi";
import servicePartApi from "@/api/servicePartApi";
import userApi from "@/api/userApi";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue"

const tableData = ref([]);
const pageInfo = ref({});
// 添加配件
const partVisible = ref(false);
// 单条订单信息
const orderInfo = ref({});
// 部门员工列表
const partList = ref([]);
// 选中的配件
const partIdList = ref([]);
// 记录当前订单id
const a_id = ref('');

// 定义规则
const rules = ref({
    number: [
        { required: true, message: '必要字段', trigger: 'blur' },
        { type: 'number', message: '数量必须为数字', trigger: 'blur' },
        { min: 1, max: 3, message: '数字超出范围', trigger: 'blur' },
    ]
})

// 通过id获取订单信息
const getAppointmentInfo = async (id) => {
    let resp = await orderApi.getColumnById(id);
    if (resp.code === 10000) {
        console.log(resp.data)
        orderInfo.value = resp.data;
    } else {
        ElMessage.error(resp.msg);
    }
}
// 获得库存配件列表
const getPartList = async () => {
    let resp = await servicePartApi.getAllPartList();
    if (resp.code === 10000) {
        partList.value = resp.data;
    } else {
        ElMessage.error(resp.msg);
    }
}
// 获得已选配件列表
const getUsePartList =async (id) => {
    let resp = await servicePartApi.getListById(id);
    if (resp.code === 10000) {
        partIdList.value = resp.data;
    } else {
        ElMessage.error(resp.msg);
    }
}

// 获取表格数据信息
const getTableData = (page) => {
    let userId = sessionStorage.getItem('userInfoUserId');
    orderApi.getAll(page, null, userId, null, null).then(
        resp => {
            if (resp.code === 10000) {
                pageInfo.value = resp.data;
                tableData.value = resp.data.list;
            }
        }
    );
}

// 显示配件
const showPart = (id) => {
    getPartList();
    getUsePartList(id);
    partVisible.value = true;
    a_id.value = id;
}

// 更新使用的配件
const updatePart = () => {
    return servicePartApi.updateInfo(a_id.value, partIdList.value)
        .then(resp => {
            if (resp.code === 10000) {
                ElMessage.success(resp.msg);
                getTableData(pageInfo.value.pageNum)
                partVisible.value = false;
                partList.value = [];
                partIdList.value = [];
                a_id.value = '';
            } else {
                ElMessage.error(resp.msg);
            }
        });
}
const finshOrder =(id) =>{
    orderApi.finishOrder(id)
        .then(resp => {
            if (resp.code === 10000) {
                ElMessage.success(resp.msg);
                getTableData(pageInfo.value.pageNum);
            } else {
                ElMessage.error(resp.msg);
                getTableData(pageInfo.value.pageNum);
            }
        });
}

getTableData(1)
</script>

<style lang="scss" scoped></style>
